<template>
  <common-page title="查看历史报告">
    <el-button slot="header" @click="$emit('close')">返回</el-button>
    <div slot="content">
      <common-list>
        <common-search slot="search" @search="handleQuery" @reset="resetQuery">
          <el-form
            ref="queryForm"
            :inline="true"
            :model="queryParams"
            @submit.native.prevent
            label-width="65px"
          >
            <el-form-item label="URL" prop="url">
              <common-input
                :verify="false"
                v-model="queryParams.url"
                @enter="handleQuery"
                clearable
              />
            </el-form-item>
            <el-form-item label="访问时间">
              <el-date-picker
                v-model="date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                value-format="yyyy-MM-dd"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <!-- <el-form-item label="状态" prop="status">
              <el-select v-model="queryParams.status">
                <el-option label="全部" :value="null"></el-option>
                <el-option label="启用" value="0"></el-option>
                <el-option label="停用" value="1"></el-option>
              </el-select>
            </el-form-item> -->
          </el-form>
        </common-search>
        <common-table
          slot="content"
          v-loading="loading"
          :data="list"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column
            label="URL"
            align="left"
            prop="url"
            show-overflow-tooltip
          />
          <el-table-column label="时间范围" align="left" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.reportBeginTime }}~{{ scope.row.reportEndTime }}
            </template>
          </el-table-column>
          <el-table-column
            label="安全得分"
            align="left"
            prop="securityScore"
            show-overflow-tooltip
          />

          <el-table-column label="操作" align="left" width="80" fixed="right">
            <template slot-scope="scope">
              <template>
                <el-button type="text" @click="handleReports(scope.row)"
                  >查看报告
                </el-button>
              </template>
            </template>
          </el-table-column>
        </common-table>

        <pagination
          slot="pagination"
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
        <Reports
          ref="reports"
          v-if="isReports"
          @close="closeReports"
          :reportId="historyId"
        ></Reports>
      </common-list>
    </div>
  </common-page>
</template>

<script>
import { getPageHistoryList } from "@/api/apisecurity/report";
import BaseList from "@/mixins/BaseList.vue";
import Reports from "./reports.vue";
export default {
  components: { Reports },
  name: "index",
  mixins: [BaseList],
  props: {
    reportId: {
      type: String,
    },
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        interfaceId: "",
        beginTime: "",
        endTime: "",
      },
      total: 0,
      date: [],
      list: [],
      loading: false,
      isReports: false,
    };
  },
  methods: {
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.queryParams = this.$options.data().queryParams;
      this.date = [];
    },
    getList() {
      this.loading = true;
      if (this.date && this.date.length > 0) {
        this.queryParams.beginTime = this.date[0];
        this.queryParams.endTime = this.date[1];
      } else {
        this.queryParams.beginTime = null;
        this.queryParams.endTime = null;
      }
      const params = {
        ...this.queryParams,
        interfaceId: this.reportId,
      };
      getPageHistoryList(params)
        .then((res) => {
          if (res && res.code === 200) {
            this.list = res.rows;
            this.total = res.total;
            this.handleListTips(res);
          } else {
            this.list = [];
            this.total = 0;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleReports(row) {
      this.historyId = row.id;
      this.isReports = true;
    },
    closeReports() {
      this.isReports = false;
    },
  },

  created() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped></style>
